<template>
  <div class="grade-detail">
    <div class="detail-header">
      <h2>成绩详情</h2>
      <div class="header-actions">
        <el-button @click="goBack">
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
        <el-button type="primary" @click="editGrade">
          <el-icon><Edit /></el-icon>
          编辑成绩
        </el-button>
      </div>
    </div>

    <el-card class="grade-info-card">
      <el-descriptions :column="3" border>
        <el-descriptions-item label="学生姓名">{{ gradeDetail.studentName }}</el-descriptions-item>
        <el-descriptions-item label="考试名称">{{ gradeDetail.examName }}</el-descriptions-item>
        <el-descriptions-item label="考试时间">{{ formatDateTime(gradeDetail.examTime) }}</el-descriptions-item>
        <el-descriptions-item label="得分">{{ gradeDetail.score }}分</el-descriptions-item>
        <el-descriptions-item label="总分">{{ gradeDetail.totalScore }}分</el-descriptions-item>
        <el-descriptions-item label="排名">{{ gradeDetail.rank }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card class="questions-detail-card">
      <template #header>
        <h3>题目详情</h3>
      </template>

      <el-table :data="gradeDetail.questions" stripe>
        <el-table-column prop="number" label="题号" width="80" />
        <el-table-column prop="type" label="题型" width="100" />
        <el-table-column prop="content" label="题目内容" min-width="300" />
        <el-table-column prop="score" label="得分" width="100">
          <template #default="{ row }">
            <span :class="getScoreClass(row.score, row.maxScore)">{{ row.score }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="maxScore" label="满分" width="80" />
        <el-table-column label="正确率" width="100">
          <template #default="{ row }">
            {{ Math.round((row.score / row.maxScore) * 100) }}%
          </template>
        </el-table-column>
        <el-table-column prop="feedback" label="反馈" min-width="200" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft, Edit } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

const gradeDetail = ref({
  studentName: '张三',
  examName: '期中数学考试',
  examTime: '2024-01-19T09:00:00Z',
  score: 85,
  totalScore: 100,
  rank: 5,
  questions: [
    {
      number: 1,
      type: '选择题',
      content: '下列哪个数是质数？',
      score: 2,
      maxScore: 2,
      feedback: '答案正确'
    },
    {
      number: 2,
      type: '填空题',
      content: '2+3=______',
      score: 3,
      maxScore: 5,
      feedback: '计算基本正确，但格式需要改进'
    }
  ]
})

const getScoreClass = (score: number, maxScore: number) => {
  const percentage = (score / maxScore) * 100
  if (percentage >= 90) return 'excellent'
  if (percentage >= 80) return 'good'
  if (percentage >= 60) return 'pass'
  return 'fail'
}

const formatDateTime = (dateTime: string) => {
  return new Date(dateTime).toLocaleString('zh-CN')
}

const goBack = () => {
  router.back()
}

const editGrade = () => {
  // TODO: 实现编辑成绩功能
  console.log('编辑成绩')
}

onMounted(() => {
  // TODO: 获取成绩详情数据
})
</script>

<style scoped lang="scss">
.grade-detail {
  padding: 20px;

  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h2 {
      margin: 0;
      color: #303133;
    }
  }

  .grade-info-card {
    margin-bottom: 20px;
  }

  .questions-detail-card {
    h3 {
      margin: 0;
      color: #303133;
    }
  }

  .excellent { color: #67c23a; font-weight: bold; }
  .good { color: #409eff; }
  .pass { color: #e6a23c; }
  .fail { color: #f56c6c; }
}
</style>